<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=750,user-scalable=no" />
		<meta name="format-detection" content="telephone=no">
		<title>一键开锁</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/unlockOnekey.css"/>
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body style="background: #f3f3f3;">
		<div class="wrapper">
			<div class="content">				
				<div class="order-wrap">
					<div class="lists using">
						<div class="head">
							<div class="left-cont">
								<div class="area">佛山南海</div>
								<div class="time">2017.06.21</div>
							</div>
							<div class="status">使用中</div>
						</div>
						<div class="main-cont">
							<div class="icon fl"><img src="https://img.thgo8.com/assets/images/07/03/864eb7fb40cc7462609ac25edca6d50ae46c8ec1.jpg" alt="" /></div>
							<div class="txt fr">
								<div class="main-top">
									<div class="name">编号：C13</div>
									<div class="time-left"><span>剩</span>10天</div>
								</div>
								<div class="barn-type">中仓 4.7m³ 高2.3m</div>
								<div class="address">佛山市南海区桂城街道灯湖西路20佛山市南海区桂城街道灯湖西路20</div>
							</div>
						</div>
						<div class="button">
							<button class="retreat-btn" onclick="upsOpen(this)">退仓</button>
							<button class="ctd-btn" onclick="upsOpen(this)">续仓</button>
							<button class="open-btn" onclick="location='barnOpen.html';">开仓</button>
						</div>
					</div>
				</div>
			</div>
			<!--弹窗-start-->
			<div class="mask">
				<div class="pop-ups first-mask">
					<div class="head">
						<span></span>
						<a href="javascript:void(0);" class="close-btn" onclick="closeMask()">×</a>
					</div>
					<div class="cont"></div>
				</div>
				<div class="pop-ups second-mask">
					<div class="head">
						<span>退仓成功</span>
						<a href="javascript:void(0);" class="close-btn" onclick="closeMask()">×</a>
					</div>
					<div class="cont">
						<div class="icon"><img src="images/retreat.png" alt="" /></div>
						<div class="txt" style="text-align: center;">“退仓成功”小金刚期待与您再次相遇</div>
						<div class="button">
							<button class="cancel-btn" onclick="closeMask()">确认</button>
							<a href="evaluation.html" style="background: #FFD445;border: none;color: #fff;margin-left: 22px;display: inline-block;height: 94px;width: 285px;line-height: 94px;text-align: center;border-radius: 8px;font-size: 34px;vertical-align: top;">评价</a>
						</div>
					</div>
				</div>
			</div>
			<!--弹窗-end-->
		</div>
		
		<script type="text/javascript">
			//显示弹窗
			function upsOpen(obj){
				$('.mask').show();
				$('.first-mask').show();
				$('.second-mask').hide();
				if($(obj).is('.retreat-btn')){
					$('.first-mask .head span').html('退仓提醒');
					$('.first-mask .cont').html('<div class="icon"><img src="images/retreat.png" alt="" /></div>'
											+'<div class="txt">退仓后，您将<span>失去</span>扫描二维码的一键开锁功能！请确认已<span>清空</span>仓内物品，<span>5</span>个工作日内自动把押金返还您的账户。</div>'
											+'<div class="button">'
											+'<button class="cancel-btn" onclick="closeMask()">取消</button>'
											+'<button class="retr-btn" onclick="doConfirm()">确认退仓</button>'
											+'</div>');
				}else if($(obj).is('.ctd-btn')){
					$('.first-mask .head span').html('续仓提醒');
					$('.first-mask .cont').html('<div class="icon"><img src="images/keeping.png" alt="" /></div>'
											+'<div class="txt">您的租期还<span>剩余10天</span>，请尽快办理续仓手续！如需退仓，请在到期前<span>取走</span>您留在仓内的物品，并到“我的订单”确认退仓。系统将会在确认退仓后<span>5</span>个工作日内自动把押金返还您的账户。</div>'
											+'<div class="button">'
											+'<button class="cancel-btn" onclick="closeMask()">取消</button>'
											+'<button class="ctd-btn2" onclick="location=\'barnKeep.html\';">续仓</button>'
											+'</div>');
				}
			};
			
			//关闭弹窗
			function closeMask(){
				$('.mask').hide();
				$('.first-mask').hide();
				$('.second-mask').hide();
			};
			
			//确认退仓
			function doConfirm(){
				$('.first-mask').hide();
				$('.second-mask').show();
			};
		</script>
	</body>
</html>
